<template>
  <div class="idcard"  >

    <div  class="null" v-if="isfull" >
      <img
        src="../../assets/images/nullData.png"
        alt=""
      >
      <p>没有数据</p>
    </div>

    <div class="bank_item" v-for="(item,index) in list" :key="index"  v-if="!isfull" >
      <div class="up">
        <span>
          群名：{{item.group_name}}
          <span style="float: right;padding-right: 10px;font-size: 12px;color: #666666" v-if="item.status==1">未满</span>
          <span style="float: right;padding-right: 10px;font-size: 12px;color: red" v-if="item.status==0">已满</span>
        </span>
      </div>
      <div class="up2">群号：{{item.group_number}}
        <button style="float: right;margin-right: 10px" class="tag-read" @click="doCopy" :data-clipboard-text="item.group_number" >
          复制
        </button>
      </div>
    </div>


  </div>
</template>

<script>
  import { getQQgroups } from "../../api/user";
  import { Toast } from "vant";
  import Clipboard from "clipboard";
  export default {
    data() {
      return {
        list:[],
        isfull: true,
      };
    },
    methods: {
      doCopy(val){
        let _this = this;
        var clipboard = new Clipboard(".tag-read");
        clipboard.on("success", e => {
          console.log("复制成功");
          Toast("复制成功");
          clipboard.destroy();
        });
        clipboard.on("error", e => {
          console.log("该浏览器不支持自动复制");
          Toast("复制失败");
          clipboard.destroy();
        });
      },


      getQQgroups(){
        // Toast.loading({
        //   mask: true,
        //   message: '加载中...'
        // });
        getQQgroups().then(res => {
          Toast.clear();
          this.list = res.data.list
          if (this.list.length > 0) {
            this.isfull = false;
          } else {
            this.isfull = true;
          }
        });
      }
    },
    created() {
      this.getQQgroups();
    },
  };
</script>
<style lang="scss">
  .idcard {
    width: 100%;
    padding-bottom: 48px;
    background-color: #f5f5f5;
    .null {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -80%);
      p {
        padding-top: 8px;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
      }
    }
    .bank_item{
      background-color: white;
      width:90%;
      height: 80px;
      margin: 0 auto;
      margin-top: 15px;
      padding-left: 10px;

      .up{
        height: 50%;
        padding-top: 5%;

      }
    }
  }
</style>

